<template>
  <div class="box">
    <div class="inside">
      <h4>点位分布统计</h4>
      <div class="statistical">
        <div class="statistical-figure"></div>
        <div class="statistical-conclusion">
          <div>
            <h4>320,11</h4>
             <span><i class="icon-dot" style="color:#ed3f35"></i>点位总数</span>
          </div>
          <div>
            <h4>418</h4>
            <span><i class="icon-dot" style="color:#eacf19"></i>本月新增</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from '@/util/echartsModule'
import adaptive from '@/util/adaptive.js'
export default {
  name: 'EchratBelow',

  data () {
    return {}
  },

  mounted () {
    this.initMap()
  },

  methods: {
    // echarts渲染
    initMap () {
      const chartDom = document.querySelector('.statistical-figure')
      const myChart = echarts.init(chartDom)

      const option = {
        tooltip: {
          // 点击模式
          trigger: 'item',
          // a 表示series配置对象中的name b是data中的name，c为data中的value d为除出来的百分比
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 扇形颜色
        color: [
          '#1d9dff',
          '#006cff',
          '#60cda0',
          '#ed8884',
          '#ff9f7f',
          '#0096ff',
          '#9fe6b8',
          '#32c5e9'
        ],
        series: [
          {
            name: '点位统计',
            // 图表类型
            type: 'pie',
            // 半径大小，第一个是内部圆心，第二个是外部展示圆形 可写%
            radius: ['5%', 80],
            // 居中
            center: ['50%', '50%'],
            // 显示模式 area（面积模式） radius（半径模式）
            roseType: 'area',
            // 扇形样式
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 30, name: '河南' },
              { value: 28, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '浙江' },
              { value: 22, name: '四川' },
              { value: 20, name: '河北' },
              { value: 18, name: '广州' },
              { value: 16, name: '湖北' }
            ],
            // 修改文字
            label: {
              fontSize: 10,
              color: 'auto' // auto映射扇形颜色
            },
            // 设置线样式
            labelLine: {
              length: 6,
              length2: 8
            }
          }
        ]
      }
      option && myChart.setOption(option)
      adaptive(myChart)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  height: 210px;
  h4 {
    margin-bottom: 20px;
  }
  .statistical {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 210px;
    .statistical-figure {
      width: 300px;
    }
    .statistical-conclusion {
      display: flex;
      flex-direction: column;
      width: 150px;
      background: url(@/assets/rect.png) no-repeat;
      background-size: cover;
      align-items: center;
      justify-content: center;
      & div:nth-child(1) {
        margin-bottom: 30px;
      }
      h4 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
        color: #1575fd;
        margin-top: 20px;
      }
    }
  }
}
</style>
